﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>空运</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s4-3/s4-3-bg.jpg');
            background-repeat: no-repeat;
        }
        text {
            font: 10px sans-serif;
            text-anchor: middle;
            fill: white;
        }
    </style >
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/world.js"></script>
    <script type="text/javascript" src="assets/china.js"></script>
    <script src="./assets/d3.v4.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/coolvis/cvis.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode/jzcode.event.js"></script>
</head>
<body>
    <canvas id="canvas2" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <div id="container" style="position:absolute;top:0px; left:0px; width:1920px; height:1080px"></div>
    <script src="./content/s4-3-event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script>
        var g_tagLink01 = 1001;

        function randomValue(){
            return '1' + parseInt((1000 + Math.random() * 6481));
        }
        function StepNode(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oBtn1 = null;
            this.onInit = function () {
                var footer = new cvisNode({ tex2d: 'images/s4-3/step-footer.png', pos: [210, 200] });
                footer.setPivot([0.5, 0]);
                this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-3/step-n-bg.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-3/step-h-bg.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [210, 170] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                this.oNumber = new cvisLabel({ text: '16481', fontSize: 42, color: '#e60013', pos: [210, 105] });
                this.oNumber.setPivot([0.5, 0.5]);
                this.addNode(this.oNumber);
                this.addNode(new Light());

                this.oBtn1 = new cvisToggleButton({ tex2d: 'images/s4-3/btn0N.png', tex2dSel: 'images/s4-3/btn0H.png', pos:[40,130] });
                this.addNode(this.oBtn1);
                this.oBtn1.on('click', function () {
                    if (s4_3.step0.oBtn1.isChecked) {
                        showChart0();
                    } else {
                        hideChart0();
                    }
                });

                this.active(false);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                }
            }
        }
        function StepNode1(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oLink = null;
            this.oArrow = null;
            this.onInit = function () {
                var footer = new cvisNode({ tex2d: 'images/s4-3/step-footer.png', pos: [210, 200] });
                footer.setPivot([0.5, 0]);
                this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-3/step-n-bg.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-3/step-h-bg.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [210, 170] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                this.oNumber = new cvisLabel({ text: '13528', fontSize: 42, color: '#e60013', pos: [210, 105] });
                this.oNumber.setPivot([0.5, 0.5]);
                this.addNode(this.oNumber);

                this.oLink = new cvisNode({tex2d:'images/s4-3/link0-1.png', pos:[-210,-10]});
                this.addNode(this.oLink);
                this.oArrow = new cvisNode({tex2d:'images/s4-3/arrow.png', pos:[-70,130]});
                this.addNode(this.oArrow);

                this.addNode(new Light());
                this.active(false);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                    this.oLink.isVisible = true;
                    this.oArrow.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                    this.oLink.isVisible = false;
                    this.oArrow.isVisible = false;
                }
            }
        }
        function StepNode2(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oLink = null;
            this.onInit = function () {
                //var footer = new cvisNode({ tex2d: 'images/s4-3/step-footer.png', pos: [210, 200] });
                //footer.setPivot([0.5, 0]);
                //this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-3/step-n-bg.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-3/step-h-bg.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [210, 170] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                this.oNumber = new cvisLabel({ text: '6268', fontSize: 42, color: '#e60013', pos: [210, 105] });
                this.oNumber.setPivot([0.5, 0.5]);
                this.addNode(this.oNumber);

                this.oLink = new cvisNode({ tex2d: 'images/s4-3/link1-2.png', pos: [-137, 3] });
                this.addNode(this.oLink);
                this.addNode(new Light());
                this.active(false);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                    this.oLink.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                    this.oLink.isVisible = false;
                }
            }
        }
        function StepNode3(tex2dTitle) {
            cvisNode.call(this, []);
            this.bgN = null;
            this.bgH = null;
            this.oTitle = null;
            this.oNumber = null;
            this.oLink = null;
            this.onInit = function () {
                var footer = new cvisNode({ tex2d: 'images/s4-3/step-footer.png', pos: [210, 200] });
                footer.setPivot([0.5, 0]);
                this.addNode(footer);

                this.bgN = new cvisNode({ tex2d: 'images/s4-3/step-n-bg.png', pos: [0, 0] });
                this.bgH = new cvisNode({ tex2d: 'images/s4-3/step-h-bg.png', pos: [0, 0] });
                this.oTitle = new cvisNode({ tex2d: tex2dTitle, pos: [210, 170] });
                this.oTitle.setPivot([0.5, 0.5]);
                this.addNode(this.bgN);
                this.addNode(this.bgH);
                this.addNode(this.oTitle);

                this.oNumber = new cvisLabel({ text: '14621', fontSize: 42, color: '#e60013', pos: [210, 105] });
                this.oNumber.setPivot([0.5, 0.5]);
                this.addNode(this.oNumber);

                this.oLink = new cvisNode({ tex2d: 'images/s4-3/link2-3.png', pos: [-52, -210] });
                this.addNode(this.oLink);
                this.addNode(new Light());
                this.active(false);
            }
            this.isActive = false;
            this.active = function (isActive) {
                this.isActive = isActive;
                if (this.isActive) {
                    this.bgN.isVisible = false;
                    this.bgH.isVisible = true;
                    this.oLink.isVisible = true;
                } else {
                    this.bgN.isVisible = true;
                    this.bgH.isVisible = false;
                    this.oLink.isVisible = false;
                }
            }
        }
        function Light() {
            cvisNode.call(this, []);
            this.onInit = function () {
                for (var index = 0; index < 8; index++) {
                    var light = new cvisNode({ tex2d: 'images/s4-3/light' + index + '.png', pos: [210, 205] });
                    light.setPivot([0.5, 0.5]);
                    this.addNode(light);
                }

                this.addAnimation(new cvisForever(new cvisSequence([new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 0) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 1) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 2) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 3) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 4) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 5) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 6) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this), new cvisWait(500), new cvisFunc(function (data) {
                    for (var index = 0; index < data.getNodeCount() ; index++) {
                        if (index == 7) {
                            data.getNodeAt(index).isVisible = true;
                        } else {
                            data.getNodeAt(index).isVisible = false;
                        }
                    }
                }, this)])));
            }
        }

        function Chart0() {
            cvisNode.call(this, []);
            this.bg = null;
            this.oBtn1 = null;
            this.onInit = function () {

                this.oBtn1 = new cvisToggleButton({ tex2d: 'images/s4-3/btnClose.png', tex2dSel: 'images/s4-3/btnClose.png', pos: [572, 0] });
                this.addNode(this.oBtn1);
                this.oBtn1.on('click', function () {
                    hideChart0();
                });

                this.isVisible = false;
            }
        }

        var g_leftArr = [];
        var g_leftArrIndex = 0;
        var s4_3 = {
            step0: new StepNode('images/s4-3/step0-title.png'),
            step1: new StepNode1('images/s4-3/step1-title.png'),
            step2: new StepNode2('images/s4-3/step2-title.png'),
            step3: new StepNode3('images/s4-3/step3-title.png'),
            chart0: new Chart0(),
            link03: new cvisNode({ tex2d: 'images/s4-3/link0-3.png', pos: [508, 579] }),
            init: function () {
                this.step0.setPos([437, 285]);
                this.step1.setPos([910, 285]);
                this.step2.setPos([1188, 72]);
                this.step3.setPos([1496, 285]);
                this.chart0.setPos([500, 671]);
            },
            showStep: function () {
                this.step0.isVisible = true;
                this.step1.isVisible = true;
                this.step2.isVisible = true;
                this.step3.isVisible = true;
            },
            hideStep: function () {
                this.step0.isVisible = false;
                this.step1.isVisible = false;
                this.step2.isVisible = false;
                this.step3.isVisible = false;
            },
            convertLinkData: function (fullData) {
                var data = fullData.links;
                var geoCoordMap = fullData.coordMap;
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem[0].name];
                    var toCoord = geoCoordMap[dataItem[1].name];
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord]
                        });
                    }
                }
                return res;
            },

            seriesHBRL: {
                name: 'hbrl',
                type: 'heatmap',
                coordinateSystem: 'geo',
                geoIndex:1,
                data:null
            },
            seriesGNELLC: {
                name: 'gnwllc-bg',
                type: 'map',
                //geoIndex: 0,
                mapType: 'china',
                left: 1270,
                top: 700,
                bottom: 60,
                right: 220,
                roam: false,
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#555577',
                            fontSize: 20
                        },
                        formatter: function (value, index) {
                            return value.name;
                        }
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(255, 255, 255, 0)',
                        borderColor: '#fff',
                        borderWidth: 1
                    }
                },
                data:[]
            },
            seriesLink: {
                name: 'project',
                type: 'lines',
                zlevel: 2,
                symbol: ['circle', 'circle'],
                symbolSize: 3,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: 'circle',
                    symbolSize: 3,
                    color: '#fff'
                },
                lineStyle: {
                    normal: {
                        color: '#fff',
                        width: 2,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                }
            },
            seriesChart0:{
                name: 'chartInst0',
                type: 'line',
                stack: '总量',
                z:301,
                lineStyle: {
                    normal: {
                        color: 'rgb(255,240,0)',
                        width: 2,
                        type: 'solid'
                    }
                },
                areaStyle: {
                    normal: {

                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: 'rgba(253,170,4,1)' // 0% 处的颜色
                        }, {
                            offset: 0.7, color: 'rgba(253,170,4, 0.6)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(0, 0, 0, 0.01)' // 100% 处的颜色
                        }], false)
                    }
                },
                data: []
            }
        };


        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;
        var g_provinceCount = null;


        function convertProvinceCountData() {
            var lData = [];
            for (var index = 0; index < g_provinceCount.names.length; index++) {
                lData.push({ name: g_provinceCount.names[index], value: g_provinceCount.values[index] });
            }
            return lData;
        }
        var g_s4_3gnwllcJson = null;
        $(document).ready(function () {
            cvis.addNode(s4_3.step0);
            cvis.addNode(s4_3.step1);
            cvis.addNode(s4_3.step2);
            cvis.addNode(s4_3.step3);
            cvis.addNode(s4_3.link03);
            cvis.addNode(s4_3.chart0);
            s4_3.link03.isVisible = false;
            cvis.addAnimation(new cvisForever(new cvisSequence([new cvisWait(500), new cvisFunc(function () {
                s4_3.step0.active(true);
            }, null), new cvisWait(500), new cvisFunc(function () {
                s4_3.step1.active(true);
            }, null), new cvisWait(500), new cvisFunc(function () {
                s4_3.step2.active(true);
            }, null), new cvisWait(500), new cvisFunc(function () {
                s4_3.step3.active(true);
            }, null), new cvisWait(500), new cvisFunc(function () {
                s4_3.link03.isVisible = true;
            }, null), new cvisWait(1000), new cvisFunc(function () {
                s4_3.step0.active(false);
                s4_3.step1.active(false);
                s4_3.step2.active(false);
                s4_3.step3.active(false);
                s4_3.step3.active(false);
                s4_3.link03.isVisible = false;
            }, null)])));
            s4_3.init();

            for (var index = 0; index < 4; index++) {
                g_leftArr.push(new cvisNode({ tex2d: 'images/s4-3/left' + index + '.png', pos: [48, 130] }));
                cvis.addNode(g_leftArr[index]);
                g_leftArr[index].isVisible = false;
            }
            g_leftArr[0].isVisible = true;
            cvis.addAnimation(new cvisForever(new cvisSequence([new cvisWait(5000), new cvisFunc(function () {
                g_leftArrIndex++;
                if (g_leftArrIndex > 3) {
                    g_leftArrIndex = 0;
                }
                for (var index = 0; index < 4; index++) {
                    g_leftArr[index].isVisible = false;
                }
                g_leftArr[g_leftArrIndex].isVisible = true;
            }, null)])));
            cvis.start({ canvas: document.getElementById('canvas2'), size: { w: 1920, h: 1080 }, interval: 30 });
            //register();


            $.get(jzcode.data.getUrl('./data/s4-3-heatmap-hbrl.json'), function (s4_3hbrlJson) {
                $.get(jzcode.data.getUrl('./data/s4-3-gnwllc.json'), function (s4_3gnwllcJson) {
                    g_provinceCount = s4_3hbrlJson;
                    g_s4_3gnwllcJson = s4_3gnwllcJson;
                    option = {
                        title: {
                            text: '',
                            subtext: '',
                            sublink: '#',
                            left: 'center',
                            top: 5,
                            itemGap: 0,
                            textStyle: {
                                color: '#577ceb'
                            }
                        },
                        brush: {
                            geoIndex: 0,
                            brushLink: 'all',
                            inBrush: {
                                opacity: 1
                            },
                            outOfBrush: {
                                color: '#b99e2a',
                                symbolSize: 4,
                                opacity: 0.1
                            }
                        },
                        graphic: {
                            elements: [{
                                id: 'title-hbrl',
                                type: 'image',
                                left: 529,
                                top: 695,
                                style: {
                                    image: './images/s4-3/title-hbrl.png'
                                },
                                z: 3
                            }, {
                                id: 'title-gnwllc',
                                type: 'image',
                                left: 1188,
                                top: 695,
                                style: {
                                    image: './images/s4-3/title-gnwllc.png'
                                },
                                z: 3
                            }]
                        },
                        grid: {
                            show: true,
                            left: 520,
                            right: 830,
                            top: 790,
                            bottom: 110,
                            borderWidth:0,
                            containLabel: false,
                            z:400
                        },
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                interval: 0,
                                rotate: -45,
                                textStyle: {
                                    color: '#FFF'
                                }
                            },
                            axisLine: {
                                show: true
                            },
                            axisTick: {
                                show: true
                            }, splitLine: {
                                show: true,
                                interval: 0
                            },
                            z: 400
                        }],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel: {
                                    show: false
                                },
                                axisLine: {
                                    show: true
                                }, splitLine: {
                                    show: true,
                                    interval: 0
                                },
                                z: 400
                            }
                        ],
                        geo: [{
                            map: 'china',
                            silent: true,
                            label: {
                                emphasis: {
                                    show: false,
                                    areaColor: '#eee'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: 'rgba(255, 255, 255, 0)',
                                    borderColor: '#fff',
                                    borderWidth: 1,
                                    color: '#fff',
                                    shadowColor: '#fff',
                                    shadowBlur: 5
                                }
                            },
                            left: 1270,
                            top: 700,
                            right: 220,
                            bottom: 60,
                            roam: false
                        }, {
                            map: 'world',
                            silent: true,
                            label: {
                                emphasis: {
                                    show: false,
                                    areaColor: '#eee'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    areaColor: 'rgba(255, 255, 255, 0)',
                                    borderColor: '#fff',
                                    borderWidth: 1,
                                    color: '#fff',
                                    shadowColor: '#fff',
                                    shadowBlur: 5
                                }
                            },
                            left: 520,
                            top: 720,
                            right: 810,
                            bottom: 60,
                            roam: false
                        }],
                        visualMap: [{
                            min: 0,
                            max: 1000,
                            splitNumber: 5,
                            inRange: {
                                color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                            },
                            textStyle: {
                                color: '#fff'
                            },
                            left: 500,
                            top: 940,
                            textStyle: {
                                color: '#fff'
                            }
                        }, {
                            min: 0,
                            max: 9999999,
                            range: [0, 9999999],
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],           // 文本，默认为数值文本
                            calculable: true,
                            orient: 'horizontal',
                            itemWidth: 15,
                            itemHeight: 110,
                            show: false,
                            seriesIndex: 1,
                            inRange: {
                                color: ['#fffbc7', '#fbff88', '#f6fb00', '#ff6e02', '#ff6e02']
                            },
                            outRange: {
                                color: ['white']
                            },
                            left: 500,
                            top: 940,
                            textStyle: {
                                color: '#fff'
                            }
                        }],
                        series: [s4_3.seriesHBRL, s4_3.seriesGNELLC, s4_3.seriesLink, s4_3.seriesChart0]
                    };

                    s4_3.seriesHBRL.data = g_provinceCount.heatmap;
                    s4_3.seriesLink.data = s4_3.convertLinkData(g_s4_3gnwllcJson);
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                }, 'json');
            }, 'json');

            myChart.on('click', function (params) {
                if (params.seriesName == 'hbrl') {
                    if (s4_3.seriesHBRL.top == 190) {
                        zoomInHBRL();
                    } else {
                        zoomOutHBRL();
                    }
                } else {
                    if (s4_3.seriesGNELLC.top == 180) {
                        zoomInGNELLC();
                    } else {
                        zoomOutGNELLC();
                    }
                }
            });
        });
        register();
    </script>
</body>
</html>